<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #red-box{
            width: 35px;
            height: 100px;
            background-color: red;
           
        }
        #green-box{
            width: 35px;
            height: 100px;
            background-color: green;
            
        }
      
       table td {
            vertical-align: bottom;
            text-align: center;
            padding: 10px;
        }

        
    </style>
</head>
<body>
    
    <h2>复利计算器</h2>
    <form name="calculator">
    本金：<input type="text" id="initial">
    <br>
    年利率：<input type="number" id="interest">% 
    <br>
    年期：<select id="years">
        <option value="0.25">3个月(0.25年)</option>
        <option value="0.5">6个月(0.5年)</option>
        <option value="1">12个月(1年)</option>
        <option value="1.5">18个月(1.5年)</option>
        <option value="2">24个月(2年)</option>
        <option value="2.5">30个月(2.5年)</option>
        <option value="3">36个月(3年)</option>
        <option value="5">60个月(5年)</option>
      </select>
    </form>
      <br>
      <br>
      <table id=blur">
        <tr>
              <th>本金</th>
              <th>复利终值</th>
        </tr>
        <tr>
            <td id="money"></td>
            <td id="newmoney"></td>
        </tr>
        <tr>
            <td><div id="red-box"></div></td>
            <td><div id="green-box"></div></td>
        </tr>
      </table>
      <script>
          
          years.onblur = function (){
              let initial=document.getElementById('initial').value;
              let interest=document.getElementById('interest').value * 0.01;
              let years=document.getElementById('years').value;
              let result = Math.round(initial * (1 + interest * years));
              let height = result / initial * 100 + 'px';

            document.getElementById('green-box').style.height = height;
            document.getElementById('money').innerHTML = initial;
            document.getElementById('newmoney').innerHTML = result;
           
          }
          
      </script>
</body>
</html>